<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>签名案例</title>
	</head>
	<body>
		<canvas id="canvas" width="800"height="500" style=" border: 1px solid red;"></canvas>
		<button id="button">清除画面</button>
		<button id="save">下载图形</button>
		<script>
			window.onload=function(){
				var canvas=document.getElementById("canvas")
				var cxt=canvas.getContext("2d")
				var canvasx=canvas.getBoundingClientRect().left;
				var canvasy=canvas.getBoundingClientRect().top;
				console.log(canvasx);
				console.log(canvasy);
				
				airboard()
				save.onclick=function(){
					var save_url=canvas.toDataURL("image/png")
					var a=document.createElement('a')
					document.body.appendChild(a)
					a.href=save_url
					a.download="画板作品"
					a.click()
				}
				function airboard(){
					for(var i=0;i<5;i++){
						for(var j=0;j<6;j++){
							cxt.fillStyle="rgb("+(255-40*i)+","+(255-25*j)+",200)"
							cxt.fillRect(25*i+675,25*j+375,25,25)
						}
					}
				}
				document.onclick=function(e){
					for(var i=0;i<5;i++){
						for(var j=0;j<6;j++){
							if(e.offsetX>=25*i+675&&e.offsetX<=25*i+700&&e.offsetY>=25*j+375&&e.offsetY<25*j+400){
								console.log(e.offsetX+","+e.offsetY)
								console.log(i+","+j)
								cxt.strokeStyle="rgb("+(255-40*i)+","+(255-25*j)+",200)"
							}
						}
					}
				}
				
				canvas.addEventListener("mousedown",downfun)
				canvas.addEventListener("mousemove",movefun)
				canvas.addEventListener("mouseup",upfun)
				var startx
				var starty
				var endx
				var endy
				cxt.lineWidth=3
				var offon=false
				function downfun(e){
					offon=true
					startx=e.clientX-canvasx
					starty=e.clientY-canvasy
				}
				function movefun(e){
					if(offon==true){
						cxt.beginPath()
						endx=e.clientX-canvasx
						endy=e.clientY-canvasy
						cxt.moveTo(startx,starty)
						cxt.lineTo(endx,endy)
						cxt.stroke()
						
						startx=endx
						starty=endy
						console.log("1111")
					}
				}
				function upfun(){
					offon=false
					cxt.closePath()
				}
				document.getElementById("button").onclick=function(){
					cxt.clearRect(0,0,canvas.width,canvas.height)
					airboard()
				}
			}
		</script>
	</body>
</html>






